<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      /*
        js一共有多少种数据类型：
          基本数据类型  string number boolean null undefined symbol bigint
          引用数据类型  object array function

        JSX中基本数据类型只能渲染 string number
        JSX中引用数据类型只能渲染 array, 但要求数组中只能包含 string number 和 React元素 数据
          渲染数组数据会自动展开数据的所有数据进行渲染
      */
      const a = "hello";
      const b = 123;
      const c = true;
      const d = null;
      const e = undefined;
      const f = Symbol();
      const g = 456n;
      const h = { name: "华哥", age: 38 };
      // const i = [
      //   { name: "华哥", age: 38 },
      //   { name: "张飞", age: 20 },
      // ];
      const o = <div>其他的元素</div>;
      const i = ["react~~", 111, "react~~", 111, "react~~", 111, o];
      const l = function () {
        console.log(111);
      };

      // 创建React元素
      const element = (
        <div>
          <p>string : {a}</p>
          <p>number : {b}</p>
          <p>boolean : {c}</p>
          <p>null : {d}</p>
          <p>undefined : {e}</p>
          <p>symbol : {f}</p>
          <p>bigint : {g}</p>
          <p>object : {i}</p>
          {o}
        </div>
      );
      // 渲染React元素
      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
